<template>
    <div>
        <div>
            <span style="font-size: 16px">审核>>采购</span>
        </div>
        <div style="width: 400px;display: flex;justify-content: space-between">
            <a-input  placeholder="商品名称" v-model="queryCondition.commodityName" style="width: 150px">
            </a-input>
            <a-input  placeholder="商品类型" v-model="queryCondition.commodityType" style="width: 150px">
            </a-input>
            <a-button @click="onSearch" icon="search" style="width:20%;background-color:dodgerblue;color: white">
                查询
            </a-button>
            <a-button @click="test" style="width:65px;background-color:dodgerblue;color: white">测试</a-button>
            <br /><br />
        </div>
        <div>
            <a-table 
                :columns="columns" 
                :data-source="purchaseList"
                :loading="loading" 
                :pagination="pagination" 
                :current="pagination.current" 
                @change="tableChange"  
                bordered
            >
                <template
                        v-for="col in ['purchasingPlanSeq', 'commodityName', 'commodityType','commoditySize','purchasingPlanNum','purchasingPlanDeadlineStr']"
                        :slot="col"
                        slot-scope="text, record, index"
                >
                    <template>
                        {{ text }}
                    </template>
                </template>
                <template slot="operation" slot-scope="text, record, index">
                    <div  style="display: flex;justify-content: space-around">
                        <a-button @click="showModal(record)" type="primary" style="width: 65px">
                            审核
                        </a-button>
                    </div>
                </template>
            </a-table>
            <div>
                <a-modal
                        title="审核"
                        :visible="modelVisible"
                        :dialog-style="{ top: '20px' }"
                        :width="720"
                        @cancel="modelCancel()"
                >
                <template slot="footer">
                    <a-button @click="modelCancel">取消</a-button>
                    <a-button type="primary" @click="notOk(purchasePlan.purchasingPlanSeq)">不通过</a-button>
                    <a-button type="primary" @click="modelHandleOk(purchasePlan.purchasingPlanSeq)">通过</a-button>
                </template>
                    <a-form :form="form" layout="vertical" hide-required-mark>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="采购方案流水号">
                                    <a-input v-model="purchasePlan.purchasingPlanSeq"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="商品编号">
                                    <a-input v-model="purchasePlan.commodityCode"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="商品名称">
                                    <a-input v-model="purchasePlan.commodityName"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="商品类型">
                                    <a-input v-model="purchasePlan.commodityType"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="商品规格">
                                    <a-input v-model="purchasePlan.commoditySize"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="商品描述">
                                    <a-input v-model="purchasePlan.commodityDesc"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="采购数量">
                                    <a-input v-model="purchasePlan.purchasingPlanNum"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="方案补充">
                                    <a-input v-model="purchasePlan.purchasingPlanDesc"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="创建时间">
                                    <a-input v-model="purchasePlan.createTimeStr"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="采购截止时间">
                                    <a-input v-model="purchasePlan.purchasingPlanDeadlineStr"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-modal>
                <a-modal
                        title="测试"
                        :visible="testModelVisible"
                        :dialog-style="{ top: '20px' }"
                        :width="720"
                        okText="发送"
                        cancelText="取消"
                        @cancel="noSend()"
                        @ok="send()"
                    
                >
                    <a-form :form="form" layout="vertical" hide-required-mark>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="采购方案流水号">
                                    <a-input v-model="testPurchasingPlan.testPurchasingPlanSeq"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="商品编号">
                                    <a-input v-model="testPurchasingPlan.testCommodityCode"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                      
                        <a-row :gutter="16">
                         
                           
                        </a-row>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-item label="采购数量">
                                    <a-input v-model="testPurchasingPlan.testPurchasingPlanNum"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="采购截止时间">
                                    <a-input type=datetime-local v-model="testPurchasingPlan.testPurchasingPlanDeadline"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-modal>
            </div>
        </div>
    </div>
</template>

<script>
    const columns = [
        {
            title: '采购流水号',
            dataIndex: 'purchasingPlanSeq',
            width: '15%',
            align: 'center',
            scopedSlots: { customRender: 'purchasingPlanSeq' },
        },
        {
            title: '商品名称',
            dataIndex: 'commodityName',
            width: '15%',
            align: 'center',
            scopedSlots: { customRender: 'commodityName' },
        },
        {
            title: '商品类型',
            dataIndex: 'commodityType',
            width: '15%',
            align: 'center',
            scopedSlots: { customRender: 'commodityType' },
        },
        {
            title: '商品规格',
            dataIndex: 'commoditySize',
            width: '15%',
            align: 'center',
            scopedSlots: { customRender: 'commoditySize' },
        },
        {
            title: '采购数量',
            dataIndex: 'purchasingPlanNum',
            width: '15%',
            align: 'center',
            scopedSlots: { customRender: 'purchasingPlanNum' },
        },
        {
            title: '采购时间',
            dataIndex: 'purchasingPlanDeadlineStr',
            width: '15%',
            align: 'center',
            scopedSlots: { customRender: 'purchasingPlanDeadlineStr' },
        },
        {
            title: '操作',
            dataIndex: 'operation',
            align: 'center',
            scopedSlots: { customRender: 'operation' },
        },
    ];
    import * as purchasePlan from '@/services/purchasing/purchasePlan.js'
    export default {
        name:'purchasePlan',
        data() {
            return {
                purchaseList:[],
                columns,
                editingKey: '',
                form: this.$form.createForm(this),
                modelVisible: false,
                testModelVisible: false,
                loading: false,
                purchasePlan: '',
                testPurchasingPlan: {testPurchasingPlanSeq:'',testCommodityCode:'',testPurchasingPlanNum:'',testPurchasingPlanDeadline:''},
                queryCondition:{commodityName: '',commodityType: ''},
                pagination: {
                    total: 0,
                    current: 1,
                    defaultPageSize: 4,
                    showSizeChanger: true,
                    pageSizeOptions: ['5', '15', '30', '50']
                }
            };
        },
        methods: {
            async onSearch() {
                this.loading = true;
                let resp = await purchasePlan.queryPurchaseList(this.queryCondition);
                this.purchaseList = resp;
                this.loading = false;
            },
            showModal(record) {
                this.modelVisible = true;
                this.purchasePlan = record;
                console.log(this.purchasePlan);

            },
             modelCancel() {
                this.modelVisible = false;
            },
            async modelHandleOk(purchasingPlanSeq) {
                this.modelVisible = false;
                let resp = await purchasePlan.updatePurchase(purchasingPlanSeq,"通过")
                if(resp === true){
                    this.$message.success('审核成功', 3,);
                }else {
                    this.$message.error('审核失败', 3,);
                }
               this.purchaseList =  await purchasePlan.getPurchaseList();
            },
            async notOk(purchasingPlanSeq){
                this.modelVisible = false;
                let resp = await purchasePlan.updatePurchase(purchasingPlanSeq,"不通过")
                if(resp === true){
                    this.$message.success('审核成功', 3,);
                }else {
                    this.$message.error('审核失败', 3,);
                }
                this.purchaseList =  await purchasePlan.getPurchaseList();
            },
            tableChange (e) {
                this.pagination.current = e.current;
            },
            test(){
                this.testModelVisible = true;
            },
            async send(){
                console.log(this.testPurchasingPlan);
                let resp =  await purchasePlan.testSend(this.testPurchasingPlan);
                if(resp === true){
                    this.$message.success("发送成功");
                    this.testModelVisible = false;
                }
               
            },
            noSend(){
                this.testModelVisible = false;

            }
        },
        async created(){
            this.loading = true;
            this.purchaseList =  await purchasePlan.getPurchaseList();
            this.loading = false;
        }
    };
</script>
<style scoped>
    .editable-row-operations a {
        margin-right: 8px;
    }
</style>
